﻿<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--资源获取-->
    <base th:href="|${#request.getContextPath()}/|">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="static/lib/html5shiv.js"></script>
    <script type="text/javascript" src="static/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="static/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>

    <!--[if IE 6]>
    <script type="text/javascript" src="static/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--layui-->
    <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"/>
    <script type="text/javascript" src="static/layui/layui.js"></script>
    <style>
        .fromTzSc {
            animation-name: example;
            animation-duration: 4s;
            animation-fill-mode: forwards;
        }

        /*动画*/
        @keyframes example {
            0% {
                top: 35%;
            }
            100% {
                top: 10%;
            }
        }

        .weiTzSs {
            position: absolute;
            top: 35%;
        }

        /* sec-bottom */
        .bottom {
            padding-top: 1.5rem;
            margin-top: 0.5rem;
            height: 7rem;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #f4bd55;
            flex-direction: column;
        }

        .bottom-top input {
            width: 1.5rem;
            border: none;
            text-align: center;
            font-size: 1.1rem;
            color: #f4bd55;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
        }

        .bottom-top span:first-child {
            color: #000;
            font-weight: 700;
        }

        .bottom-top span:last-child {
            font-size: 0.6rem;
        }

        .bottom-bottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 75%;
        }

    </style>
    <title>资讯列表</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    首页
    <span class="c-gray en">&gt;</span>
    模拟投资
    <span class="c-gray en">&gt;</span>
    普通投资
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>

    <a id="djsc" class="btn btn-success radius r " style="line-height:1.6em;margin-top:3px"
       href="javascript:;" title="收藏">

        <i id="sc" class=" Hui-iconfont">&#xe69d;</i>
        <i id="qxsc" class=" Hui-iconfont">&#xe69e;</i></a>
</nav>
<div class="page-container">
    <div>
        <div id="fromTzl" class="btn-group weiTzSs" style="margin-left: 11%; width: 70%;">
            <span class="btn btn-primary radius">
                <select id="lb" class="select" size="1" name="demo1" th:selected="${lb}"
                        style="background: transparent;border: 0;display: block;position: relative;">
                    <option value="1" selected>股票</option>
                    <option value="2">基金</option>
                    <option value="3">金价</option>
                  </select>
            </span>
            <span class="btn btn-default radius" style="
    padding-top: 0px;
    padding-bottom: 0px;
    border-top-width: 0px;
    padding-left: 0px;
    padding-right: 0px;width: 80%
">
                <input id="tzCode" type="text" th:value="${code}" placeholder="股票、基金代码" class="input-text ">
            </span>
            <span id="ssGp" class="btn btn-default radius" style="width: 10%">搜索</span>
        </div>
    </div>

    <div class="layui-row  " id="ssdjg"
         style="border: 1px solid #e2e2e4;display:none;width: 75%;margin-left: 10%;margin-top: 6%;" align="center">

        <div class="panel panel-default">
            <div class="panel-header">详细</div>
            <div>
                <div class="layui-col-xs12 layui-col-md8">
                    <div class="grid-demo grid-demo-bg1"
                         style="padding: 40px;font-size:15px;border: 1px solid #e2e2e4;height: 100%"><br/><br/>
                        <div class="layui-col-xs6">
                            代码：
                            <div class="grid-demo grid-demo-bg1" id="code"></div>
                            <br/><br/><br/>
                            名称：
                            <div class="grid-demo grid-demo-bg1" id="name"></div>
                            <br/><br/><br/>
                            属性：
                            <div class="grid-demo grid-demo-bg1" id="tzlb"></div>
                            <br/><br/><br/>
                            时间：
                            <div class="grid-demo grid-demo-bg1" id="tzdate"></div>
                            <br/>
                        </div>
                        <div>

                            昨日：
                            <div class="grid-demo grid-demo-bg1" id="zr"></div>
                            <br/><br/><br/>
                            今日：
                            <div class="grid-demo grid-demo-bg1" id="jr"></div>
                            <br/><br/><br/>
                            涨幅：
                            <div class="grid-demo grid-demo-bg1" id="zf"></div>
                            <br/><br/><br/>
                            <a id="shoucangTz">收藏>></a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md4">
                    <form id="form">
                    <div class="grid-demo" style="padding: 80px 30px 20px 30px;">
                        <p><font id="djr" size="25" face="arial" color="red"></font></p>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">账户：</label>
                        <div class="layui-input-block">
                            <select class="select" id="selectzh" size="1" name="demo1" style="padding: 9px 15px;">
                                <option value="" selected>请选择</option>
                            </select>
                        </div>
                    </div>
                    <label class="layui-form-label">请输入：</label>
                    <div class="layui-input-block">
                    <input type="text" id="srNumber" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div><br><br>
                    <button type="button" lay-submit lay-filter="mr" class="layui-btn  layui-btn-radius">买&nbsp;入</button>
                    <button type="button" lay-submit lay-filter="mc" class="layui-btn  layui-btn-radius">卖&nbsp;出</button>
                    <br/>
                    此账户还有钱：<span id="qi"></span>,拥有本只股票<span id="gu"></span>股
                        <input hidden="hidden" id="qiInput" value="">
                        <input hidden="hidden" id="guInput" value="">
                        <input hidden="hidden" id="zqId" value="">
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
    <script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="static/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="static/lib/laypage/1.2/laypage.js"></script>
    <script>
        /*收藏投资*/
        $("#shoucangTz").click(function () {
            {
                $.ajax({
                    url:"TouZi/Sctz",
                    type:"POST",
                    data:{
                        "lb": $("#tzlb").val(),
                        "uId": [[${session.session_user.uId}]],
                        "tzCode": $("#code").val()
                    },success:function () {
                        console.log("已收藏")
                    }
                })
            }
        })

        /*参数*/
        var ra;//下拉列表
        var selecttted;//下拉选项
        /*form表单*/
        layui.use('form', function(){
            var form = layui.form;
            /*买入*/
            form.on('submit(mr)', function(data){
                if($("#srNumber").val()*$("#jr").val()>$("#qi").val()){
                    console.log($("#qi").val());
                    console.log($("#srNumber").val())
                    layer.msg('您输入金额大于您所拥有的钱哦，多赚点吧');
                }else if($("#srNumber").val()=="") {
                    layer.msg("请输入买入卖出份额");
                }else {
                        $.ajax({
                            url:"TouZi/MrTZ",
                            type:"POST",
                            data:{
                                "zqId": $("#zqId").val(),
                                "lb": $("#tzlb").val(),
                                "uId": [[${session.session_user.uId}]],
                                "tzCode": $("#code").val(),
                                "tzAmount":$("#srNumber").val()*$("#jr").val(),
                                "tzFe":$("#srNumber").val(),
                                "codeName":$("#name").val()
                            },success:function () {
                                layer.msg('已买');
                                xl();
                                selectChange(selecttted);
                            }
                        })
                    }

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*卖出*/
            form.on('submit(mc)', function(data){
                if($("#srNumber").val()>$("#gu").val()){

                    layer.msg('您卖的比你输入的份额多哦，多买点吧');
                }else if($("#srNumber").val()=="") {
                    layer.msg("请输入买入卖出份额");
                }else {
                    $.ajax({
                        url:"TouZi/McTZ",
                        type:"POST",
                        data:{
                            "zqId":$("#zqId").val(),
                            "lb": $("#tzlb").val(),
                            "uId": [[${session.session_user.uId}]],
                            "tzCode": $("#code").val(),
                            "tzAmount":$("#srNumber").val()*$("#jr").val(),
                            "tzFe":$("#srNumber").val(),
                            "codeName":$("#name").val()

                        },success:function () {
                            layer.msg('已买');
                            xl();
                            selectChange(selecttted);
                        }
                    })
                }
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
        /*直接执行*/
        $(document).ready(function () {
            /*目录*/
            xl();
            /*select监听*/
            $("#selectzh").change(function () {
                var selected = $(this).children('option:selected').val();
                selecttted = selected;
                selectChange(selected);
            });
        });
        /*目录*/
        var xl = function () {
            $.ajax({
                type: "GET",
                url: "TouZi/SelectZh",
                data: {
                    "uId": [[${session.session_user.uId}]]
                }, success: function (reg) {
                    ra = reg;
                    for (var r of reg) {
                        $("#selectzh").append("<option value=\"" + r.zh.zhId + "\" >" + r.totle + "</option>")
                    }
                }
            })
        }
        /**/
        var selectChange = function (selected) {
            for (var r of ra) {
                if (r.zh.zhId == selected) {
                    $("#qi").html(r.zh.amount);
                    $("#qi").val(r.zh.amount);
                    $("#zqId").val(r.zqId);
                    $.ajax({
                        url: "TouZi/SelectTzjl",
                        type: "GET",
                        data: {
                            "zqId": r.zqId,
                            "lb": $("#tzlb").val(),
                            "uId": [[${session.session_user.uId}]],
                            "tzCode": $("#code").val()
                        },
                        success: function (reg) {
                            var ss ;
                            if(reg == ""){
                                ss = 0;
                            }else {
                                ss = reg;
                            }
                            $("#gu").html(ss);
                            $("#gu").val(ss);
                        }
                    })
                }
            }
        }
        /*搜索*/
        var sssy = 0;/*搜索上移*/
        $("#ssGp").on("click", function () {
            if (sssy == 0) {
                $("#fromTzl").addClass("fromTzSc");
                $("#ssdjg").fadeIn();
            }
            sSuo();
        })

        function sSuo() {
            var lb = $("#lb").val();
            var tzCode = $("#tzCode").val();
            $.ajax({
                type: "GET",
                url: "TouZi/SelectGPJJ",
                data: {
                    "lb": lb,
                    "code": tzCode
                }, success: function (reg) {
                    $("#shoucangTz").show();
                    if(reg.lb==3){
                        $("#shoucangTz").hide();
                    }
                    sssy = 1;
                    $("#code").html(reg.code);
                    $("#code").val(reg.code);
                    $("#name").html(reg.name);
                    $("#name").val(reg.name);
                    $("#tzlb").html(reg.lb);
                    $("#tzlb").val(lb);
                    $("#tzdate").html(reg.date);
                    $("#zr").html(reg.zr);

                    $("#jr").html(reg.jr);
                    $("#jr").val(reg.jr);
                    $("#zf").html(reg.zf);
                    $("#djr").html((reg.jr));

                    console.log("返回成功")
                }
            })
        };
        /*时间选择*/
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //常规用法
            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });
        });
        /*收藏按钮*/
        var ejhref = "Investment/GoJdInvestment";//收藏路径
        $.ajax({
            url: "CollectionPage?page=" + ejhref,
            async: false,
            type: "GET",
            success: function (datas) {
                if (datas == "sc") {

                    $("#qxsc").addClass("layui-hide");
                    $("#sc").addClass("layui-show");

                } else {
                    $("#sc").addClass("layui-hide");
                    $("#qxsc").addClass("layui-show");
                }
            }
        })
        $("#djsc").on("click", function () {

            $.ajax({
                url: "CollectionNewPage",
                type: "POST",
                data: {
                    "page": ejhref,
                    "pageName": "普通投资"//收藏名字
                },
                success: function (regas) {
                    if (regas != "sc") {

                        $("#qxsc").attr("class", "Hui-iconfont layui-hide");
                        $("#sc").attr("class", "Hui-iconfont layui-show");

                    } else {
                        $("#sc").attr("class", "Hui-iconfont layui-hide");
                        $("#qxsc").attr("class", "Hui-iconfont layui-show");
                    }

                }
            })

        });
        /**/
        /*时间转换*/
        function GetNumberOfDays(date1, date2) {
            //获得天数
            //date1：开始日期，date2结束日期
            var a1 = Date.parse(new Date(date1));
            var a2 = Date.parse(new Date(date2));
            var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
            return day
        };
        /*表格*/
        layui.use('table', function () {
            var table = layui.table;


            var tableIns = table.render({
                elem: '#zxtz'
                , url: '/Investment/SelectMyInvestment'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print',]
                , title: '最新投资'
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        , {
                        field: 'lb',
                        title: '类别',
                        width: 80,
                        fixed: 'left',
                        unresize: true,
                        sort: true,
                        templet: function (res) {
                            var lb = "";
                            if (res.timeLb != 0
                            ) {
                                lb = "常规"
                            } else {
                                lb = "特殊"
                            }
                            return '<em >' + lb + '</em>'
                        }
                    }
                        , {
                        field: 'totle', title: '主题', width: 520, templet(res) {
                            return '<em title=\"' + res.remarks + '">' + res.totle + '</em>';
                        }
                    }
                        , {field: 'startTime', title: '开始时间', width: 200, sort: true}
                        , {field: 'endTime', title: '结束时间', width: 200, sort: true}
                        , {
                        field: 'SurplusTime', title: '剩余时间', width: 100, sort: true, templet: function (res) {
                            var dates = GetNumberOfDays(res.startTime, res.endTime);
                            if (dates >= 0) {
                                return '<em>' + dates + '</em>'
                            } else {
                                return '<em>已结束</em>'
                            }

                        }
                    }
                        , {
                        field: 'amount', title: '金额', sort: true, templet: function (res) {
                            if (res.zh.amount != null) {
                                return '<em>' + res.zh.amount + '</em>';
                            } else
                                return '<em><a href="/Investment/NewUserZh?zqId=' + res.zqId + '&uId=' + [[${session.session_user.uId}]] + '" id="canyu"> ' + '点击参与' + '</a></em>'
                        }
                    }
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 100}
                    ]
                ]
                , page: true
            });

            /*表格重载*/
            $('#selectMyIn').on('click', function () {
                function datess(res) {
                    if (res == "") {
                        return "";
                    } else {
                        return new Date(res);
                    }
                };
                var startTime = datess($('#startTime').val() == "" ? "1999-01-01" : $('#startTime').val());
                var endTime = datess($('#endTime').val() == "" ? "2999-12-31" : $('#endTime').val());
                console.log(startTime);
                console.log(endTime);
                var totle = $('#totle').val();


                tableIns.reload({
                    url: '/Investment/SelectMyInvestment',
                    page: {curr: 1},
                    where: {
                        "startTime": startTime,
                        "endTime": endTime,
                        "totle": totle
                    }

                })
            })


            //头工具栏事件
            table.on('toolbar(zxtz)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;


                }
                ;
            });

            //监听行工具事件
            table.on('tool(zxtz)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                console.log(obj);
                if (obj.event === 'edit') {
                    layer.open({
                        Type: 2,
                        title: '我是标题',
                        area: ['70%', '70%'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: 'test/iframe'
                    })
                }
            });
        });
    </script>

    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="static/lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="static/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>

    <script type="text/javascript">


    </script>
</div>
</body>
</html>
